import CodeView from '../../../shared/components/CodeView';
import DisplayColumn from '../../../shared/components/DisplayColumn';
import DisplayGrid from '../../../shared/components/DisplayGrid';
import Blockquote from '../../../shared/components/Blockquote';
import StylingHooksTable from '../../../shared/components/StylingHooksTable';
import * as Base from './base/example';
import { getDisplayElementById } from '../../shared/helpers';

<div className="doc lead">
  A Tooltip is a short message giving non-essential, contextual information, activated by hover, focus, or click. It can't be focused or contain focusable content.
</div>

<CodeView
  exampleOnly
  demoStyles="
    padding-left: 1rem;
    padding-top: 1rem;
    position: relative;
  "
>
  {getDisplayElementById(Base.examples, 'button-icon')}
</CodeView>

## About Tooltips

Nubbins are indicators that inform the user of the direction of the content associated with the tooltip. A tooltip can accept the following nubbin position classes, `.slds-nubbin_left`, `.slds-nubbin_left-top`, `.slds-nubbin_left-bottom`, `.slds-nubbin_top-left`, `.slds-nubbin_top-right`, `.slds-nubbin_right-top`, `.slds-nubbin_right-bottom`, `.slds-nubbin_bottom-left`, `.slds-nubbin_bottom-right`.

Learn more about how to use them at the [Nubbins documentation](/components/popovers/#flavor-nubbins).

### Accessibility

Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse. Examples of focusable elements include links, buttons, and inputs. Give the tooltip an ID and use that as the value of the `aria-describedby` attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content.

When using a link as the focusable element to show a tooltip, add a `<div>` at the bottom of the tooltip bubble that includes a description of where the link will take the user. Add `aria-hidden='true'` to this element, and ensure that the link text itself matches the text within this `<div>`.

## Base

<CodeView
  demoStyles="
          padding-left: 2rem;
          padding-top: 5rem;
          position: relative;
        "
>
  {getDisplayElementById(Base.default)}
</CodeView>

## Examples

### As an icon link

<CodeView
  demoStyles="
          padding-left: 2rem;
          padding-top: 6.75rem;
          position: relative;
        "
>
  {getDisplayElementById(Base.examples, 'link')}
</CodeView>

### As a Button Icon

<CodeView
  demoStyles="
          padding-left: 2rem;
          padding-top: 5rem;
          position: relative;
        "
>
  {getDisplayElementById(Base.examples, 'button-icon')}
</CodeView>

### As a Button

<CodeView
  demoStyles="
          padding-left: 2rem;
          padding-top: 5rem;
          position: relative;
        "
>
  {getDisplayElementById(Base.examples, 'button')}
</CodeView>

## Modifiers

### Motion

<DisplayGrid>
  <DisplayColumn>
    <strong>Bottom To Top</strong>
    <CodeView toggleCode={false}>
      {getDisplayElementById(Base.examples, 'bottom-to-top')}
    </CodeView>
  </DisplayColumn>
  <DisplayColumn>
    <strong>Top To Bottom</strong>
    <CodeView toggleCode={false}>
      {getDisplayElementById(Base.examples, 'top-to-bottom')}
    </CodeView>
  </DisplayColumn>
  <DisplayColumn>
    <strong>Right To Left</strong>
    <CodeView toggleCode={false}>
      {getDisplayElementById(Base.examples, 'right-to-left')}
    </CodeView>
  </DisplayColumn>
  <DisplayColumn>
    <strong>Left To Right</strong>
    <CodeView toggleCode={false}>
      {getDisplayElementById(Base.examples, 'left-to-right')}
    </CodeView>
  </DisplayColumn>
</DisplayGrid>

### Toggle

<DisplayGrid>
  <DisplayColumn>
    <strong>Rise</strong>
    <CodeView toggleCode={false}>
      {getDisplayElementById(Base.examples, 'rise')}
    </CodeView>
  </DisplayColumn>
  <DisplayColumn>
    <strong>Fall</strong>
    <CodeView toggleCode={false}>
      {getDisplayElementById(Base.examples, 'fall')}
    </CodeView>
  </DisplayColumn>
</DisplayGrid>

## Styling Hooks Overview

<StylingHooksTable name="tooltips" type="component" />
